<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<title><c:out value="${not empty ag.id ? '修改应用群组信息':'新增应用群组'}" /></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<jsp:include page="../common/import.jsp"></jsp:include>

</head>
<body>
	 <div class="pt0" id="smIframe">
       <div class="right-form mt0">
       <form class="add-form" id="editForm" method="post" action="#" onsubmit="return false;">
          <input id="roleId" type="hidden" value="${roleId}">
		<ul class="w100 layer-form">
              
               
                <li style="width:100%;">
                   <label class="ser-label">应用选择：</label>
               	  <!--  <div class="form-content"> -->
               	   
			<div class="area-div clearfix">
              <div class="pull-left">
              
                  <dl class="area-list-left " id="area-list-left" style="height:370px">
                      <dt>已选择</dt>
                      <dd><input type="text" class="w100 mt5" id="area-left-search" placeholder="搜索"/></dd>
                  </dl>
              </div>


              <div class="btn-group pull-left">
                <div class="btn-middle">
                  <button class="go-right" onclick="addArea()"> > </button>
                  <button class="go-left" onclick="delArea()"> < </button>
                </div>
              </div>
              <div class="pull-left">
                  
                 <dl class="area-list-right" id="area-list-right" style="height:370px">
                  <dt>未选择</dt>
                  <dd><input type="text" class="w100 mt5" id="area-right-search" placeholder="搜索"/></dd>
              </dl>
          </div>
          </div>
               	   <!-- </div> -->
               </li>			 
               			
               <li class="w-per">
                   
                   <div class="form-content clearfix" style="padding-left:165px">
                       <button class="btn btn-orange" id="savebtn" onclick="save()" ><i class="fa fa-save mr5"></i>保存</button>
                       <button id="cancelBtn" class="btn btn-default" onclick="closeLayerOpen()"><i class="fa fa-reply mr5"></i>返回</button>
                   </div>
               </li>
            </ul>
    	</form>
    </div>
  </div>      
</body>
<script type="text/javascript">
function closeLayerOpen(){
	parent.layer.close(parent.layer.getFrameIndex(window.name));
}

var isSaving = false;
function save(){
	if(isSaving) return;
	var roleId = $("#roleId").val();
	var appIds = '';
	/* $('#left_select dd').each(function(i){
		if(i==0){
			appIds = appIds+$(this).attr('value');
		}else{
			appIds = appIds+','+$(this).attr('value');
		}
	}); */
	var index = 0;
	for(var i in appList){
		if(0 == appList[i].num){
			if(0 == index){
				appIds = appList[i].id;
				index++;
			}else{
				appIds = appIds + "," + appList[i].id;
			}
		}
	}
	var data={
			roleId:roleId,
			appIds:appIds
			};
	console.log(data);
	//防止多次点击
	$("#savebtn").attr('disabled','disabled');
	if(isSaving) return;
	isSaving = true;
	
 	$.post("${ctx}/role/save/role/application",data,function(result){
		if(result.code=="success"){
			 successTip();
			
			 setInterval("parent.layer.close(parent.layer.getFrameIndex(window.name))",2000);
			 
		}else{
			errorTip();
			$("#savebtn").removeAttr('disabled');
			isSaving = false;
		}
		
	},"json"); 
}

//选择框相关
var appList = [];
	<c:forEach items="${hasList }" var="app">
		appList.push({"area":"${app.appName }","id":"${app.id}","num":0});
	</c:forEach>
	<c:forEach items="${noHasList }" var="app">
		appList.push({"area":"${app.appName }","id":"${app.id}","num":1});
	</c:forEach>


	//默认显示全部
	showlist('area-list-left',appList, 0);
	showlist('area-list-right',appList, 1);
	

function showlist(id,list,num){
    $('#'+id).find('dd[id*=dd]').remove();
    var newNode = '';
    for(var i in list){
        if (list[i].num == num) {
            newNode+='<dd id="dd_'+i + '">' + list[i].area + '</dd>';
        };
    }
    $("#"+id).append(newNode)
}

//自动完成查找
function autoComplete(id,list,num){
    var meetlist=[];//满足查找条件保存在数组中
    if(old_value!==''){
        if(num == 0){
            //查找条件，并赋值
            for(var i in list){
                if(list[i].area.indexOf(old_value)>=0&&list[i].num!=1){
                    meetlist.push(list[i]);
                }
            }
            //显示满足查找条件的列表
            showlist(id,meetlist,num);
        }else{
            for(var i in list){
                if(list[i].area.indexOf(old_value)>=0&&list[i].num!=0){
                    meetlist.push(list[i]);
                }
            }
            //显示满足查找条件的列表
            showlist(id,meetlist,num);
        }
        
    }
    if(old_value==''){
        //输入框为空，显示全部列表
        if(num == 0){
            for(var i in list){
                if(list[i].num != 1 && list[i].num != 0){
                    list[i].num = num;
                }
            }
            showlist(id,appList,num)
        }else{
            for(var i in list){
                if(list[i].num!=0){
                    list[i].num = 1;
                }
            }
            showlist(id,appList,num)
        }
        
    }
    /* count+=1; */
}



//左边输入框查找显示
document.getElementById("area-left-search").onkeyup = function(){
    old_value=$('#area-left-search').val();
    autoComplete("area-list-left",appList,0);
};
//右边输入框查找显示
document.getElementById("area-right-search").onkeyup = function(){
    old_value=$('#area-right-search').val();
    autoComplete("area-list-right",appList,1);
};


$(".area-list-left").on("click","dd:not(:first)",function(){       //点击元素dd
    var cla = $(this).attr("class");
    if (cla) {
        //以空格为断点分割字符串
        var clarray = cla.split(" ");          
    }
    //判断active是否包含在数组里，不包含则返回-1
    var num = jQuery.inArray("active",clarray);   
    if ( num == -1) {
        $(this).addClass("active");
    }else{
        $(this).removeClass("active");
    }
});

$(".area-list-right").on("click","dd:not(:first)",function(){
    var cla = $(this).attr("class");
    if (cla) {
        var clarray = cla.split(" ");
    }
    var num = jQuery.inArray("active",clarray);
    if ( num == -1) {
        $(this).addClass("active");
    }else{
        $(this).removeClass("active");
    }
});




function addArea(){
$(".area-list-left .active").each(function(){
    var ddText = $(this).html();
    for(var i in appList) {
        if (ddText == appList[i].area) {
            appList[i].num = 1;
        };
    }
})
$(".area-list-right dd:not(:first)").each(function(){
    var ddText = $(this).html();
    for(var i in appList) {
        if (ddText == appList[i].area) {
            appList[i].num = 1;
        };
    }
})
showlist('area-list-left',appList, 0);
showlist('area-list-right',appList, 1);
document.getElementById("area-left-search").value = '';
document.getElementById("area-right-search").value = '';
}
function delArea(){
$(".area-list-right .active").each(function(){
    var ddText = $(this).html();
    for(var i in appList) {
        if (ddText == appList[i].area) {
            appList[i].num = 0;
        };
    }
});
$(".area-list-left dd:not(:first)").each(function(){
    var ddText = $(this).html();
    for(var i in appList) {
        if (ddText == appList[i].area) {
            appList[i].num = 0;
        };
    }
});
showlist('area-list-right',appList, 1);
showlist('area-list-left',appList, 0);
document.getElementById("area-right-search").value = '';
document.getElementById("area-left-search").value = '';
}

/* $(function(){
    $(".area-list-left").on("click","dd",function(){       //点击元素dd
        var cla = $(this).attr("class");
        if (cla) {
            //以空格为断点分割字符串
            var clarray = cla.split(" ");          
        }
        //判断active是否包含在数组里，不包含则返回-1
        var num = jQuery.inArray("active",clarray);   
        if ( num == -1) {
            $(this).addClass("active");
        }else{
            $(this).removeClass("active");
        }
    });

    $(".area-list-right").on("click","dd",function(){
        var cla = $(this).attr("class");
        if (cla) {
            var clarray = cla.split(" ");
        }
        var num = jQuery.inArray("active",clarray);
        if ( num == -1) {
            $(this).addClass("active");
        }else{
            $(this).removeClass("active");
        }
    })
})

function delArea(){
    var dlText = "";
    $(".area-list-left .active").each(function(){
        var ddText = $(this).html();
        var v = $(this).attr('value');
        dlText += "<dd value='"+v+"'>" + ddText +"</dd>";
        $(this).remove();
    })
    
    $(".area-list-right").append(dlText);
}
function addArea(){
    var dlText = "";
    $(".area-list-right .active").each(function(){
        var ddText = $(this).html();
        var v = $(this).attr('value');
        dlText += "<dd value="+v+">" + ddText +"</dd>";
        $(this).remove();
    })
	
    $(".area-list-left").append(dlText);
} */

</script>
</html>